<template>
  <!-- 列表组件 -->
  <div class="saidAll">
    <div class="searchbox">
      <p>搜索：</p>
      <el-input
        v-model.trim="keySearch"
        clearable
        placeholder="请输入设备名称"
        @change="queryList"
      ></el-input>
    </div>
    <div class="equip-box">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="equip-box-one"
        :class="nowIndex === index ? 'equip-box-one-active' : ''"
        @click="selectionChange(item, index)"
      >{{ item.equipmentName }}</div>
    </div>
  </div>
</template>
<script>
import physicalUnionDataApi from "@/api/physical-union-monitoring/physical-union-data/index";

export default {
  data() {
    return {
      dataList: [],
      nowIndex: "",
      keySearch: ""
    };
  },
  created() {
    this.queryList();
  },
  mounted() {},
  methods: {
    selectionChange(e, index) {
      this.nowIndex = index;
      this.$emit("selectionChange", { ...e, index: index });
    },
    // 获取设备数据
    queryList() {
      let params = {
        page: 1,
        size: 1000,
        entity: {
          operationMode: true,
          organizationNo: sessionStorage.organizationNo,
          status: 'ENABLE'
        }
      };
      if (this.keySearch.length > 0) {
        params.entity.equipmentName = this.keySearch;
      }
      physicalUnionDataApi.queryOperationEquipments(params).then(res => {
        if (res.code === 1) {
          let list = res.data || {};
          this.dataList = list.content || [];
          // this.dataList = []
          // for (var i in data) {
          //   this.dataList.push({
          //     equipmentName: data[i],
          //     equipmentCode: i
          //   })
          // }
          if (this.dataList.length > 0) {
            this.selectionChange(this.dataList[0], 0);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss"  scoped>
.saidAll {
  height: 100%;
  width: 100%;
  .searchbox {
    height: 8%;
    p {
      width: 55px;
    }
    display: flex;
    align-items: center;
  }
  .equip-box {
    width: 100%;
    height: 92%;
    padding-bottom: 10px;
    overflow-y: auto;
  }
}

.equip-box-one {
  width: 100%;
  padding: 15px 10px;
  color: #fff;
  font-size: 15px;
  background-color: #024558;
  cursor: pointer;
  border-right: 2px solid #688b98;
  border-left: 2px solid #688b98;
  border-bottom: 1px solid #688b98;
  border-top: 1px solid #688b98;
  &:hover {
    color: #000000;
    font-weight: 700;
    background-color: #fff;
  }
}
.equip-box-one-active {
  color: #000000;
  font-weight: 700;
  background-color: #fff;
}
</style>
